<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工列表练习</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<div>
    {{info}}
    <input type="text" placeholder="姓名" v-model="user.name">
    <input type="text" placeholder="工资" v-model="user.salary">
    <input type="text" placeholder="工作" v-model="user.job">
    <input type="button" value="添加员工" @click="f()">
    <table border="1">
        <caption>员工列表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>工资</th>
            <th>工作</th>
            <th>操作</th>
        </tr>
        <!--遍历 数组-->
        <!--i表示当前数组的下标-->
        <tr v-for="(u,i) in arr">
            <td>{{i+1}}</td>
            <td>{{u.name}}</td>
            <td>{{u.salary}}</td>
            <td>{{u.job}}</td>
            <!--i表示要删除的下表,也是对应行的下标-->
            <td><input type="button" value="删除" @click="del(i)"></td>
        </tr>
    </table>

</div>
<script>
    let v= new Vue({
        el:"body>div",
        data:{
            info:"",
            arr:[],
            user:{name:"",salary:"",job:""}
        },
        methods:{
          f(){
              // 向数组中添加数据,在向数组添加对象时,应重新生成对象,
              // 如果直接将user添加进arr则页面中的数据会随着输入框的改变而改变
              v.arr.push({
                  name:v.user.name,
                  salary:v.user.salary,
                  job:v.user.job}
              )
          },
          //   删除指定标号的内容
          del(i){
          //     从数组中删除对象
              v.arr.splice(i,1)
          }
        }
    })
</script>
</body>
</html>